<!DOCTYPE html>
<html>
<head>
    <title>Fig. 6.1 - Charged Spheres</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="750" height="480"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw a line with an arrowhead at each end
        function drawDoubleArrowLine(ctx, x1, y1, x2, y2) {
            const headlen = 10; // length of head in pixels
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            
            // Arrowhead at (x2, y2)
            let angle1 = Math.atan2(y2 - y1, x2 - x1);
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle1 - Math.PI / 6), y2 - headlen * Math.sin(angle1 - Math.PI / 6));
            ctx.moveTo(x2, y2);
            ctx.lineTo(x2 - headlen * Math.cos(angle1 + Math.PI / 6), y2 - headlen * Math.sin(angle1 + Math.PI / 6));

            // Arrowhead at (x1, y1)
            let angle2 = Math.atan2(y1 - y2, x1 - x2);
            ctx.moveTo(x1, y1);
            ctx.lineTo(x1 - headlen * Math.cos(angle2 - Math.PI / 6), y1 - headlen * Math.sin(angle2 + Math.PI / 6));
            ctx.moveTo(x1, y1);
            ctx.lineTo(x1 - headlen * Math.cos(angle2 + Math.PI / 6), y1 - headlen * Math.sin(angle2 - Math.PI / 6));
            
            ctx.stroke();
        }

        // --- Drawing Parameters ---
        const y_center = 240;

        // Sphere A
        const rA = 80;
        const cxA = 160;
        const x_surface_A = cxA + rA;

        // Sphere B
        const rB = 40;
        const gap = 300;
        const x_surface_B = x_surface_A + gap;
        const cxB = x_surface_B + rB;

        // Point P
        const x_dist_from_A = 180; // Representative distance for x
        const xP = x_surface_A + x_dist_from_A;
        const rP = 3;

        // Dimension lines y-positions
        const y_dim_top = 120;
        const y_dim_bottom = 380;

        // --- Styles ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '22px Arial';

        // --- Draw Spheres ---
        // Sphere A
        ctx.beginPath();
        ctx.arc(cxA, y_center, rA, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.textAlign = 'right';
        ctx.fillText('sphere A', cxA - rA - 20, y_center - rA - 5);

        // Sphere B
        ctx.beginPath();
        ctx.arc(cxB, y_center, rB, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.textAlign = 'left';
        ctx.fillText('sphere B', cxB + rB + 20, y_center - rA - 5);

        // --- Draw Point P ---
        ctx.beginPath();
        ctx.arc(xP, y_center, rP, 0, 2 * Math.PI);
        ctx.fill();
        ctx.textAlign = 'center';
        ctx.fillText('P', xP, y_center - 15);

        // --- Draw Dashed Lines ---
        ctx.save();
        ctx.setLineDash([6, 6]);
        ctx.lineWidth = 1.5;

        // Horizontal center line
        ctx.beginPath();
        ctx.moveTo(cxA - rA - 60, y_center);
        ctx.lineTo(cxB + rB + 90, y_center);
        ctx.stroke();

        // Vertical dimension guides
        // From A surface
        ctx.beginPath();
        ctx.moveTo(x_surface_A, y_dim_top);
        ctx.lineTo(x_surface_A, y_dim_bottom);
        ctx.stroke();

        // From B surface
        ctx.beginPath();
        ctx.moveTo(x_surface_B, y_dim_top);
        ctx.lineTo(x_surface_B, y_center);
        ctx.stroke();

        // From P
        ctx.beginPath();
        ctx.moveTo(xP, y_center);
        ctx.lineTo(xP, y_dim_bottom);
        ctx.stroke();

        ctx.restore();

        // --- Draw Dimension Lines and Labels ---
        ctx.lineWidth = 1.5;

        // Top dimension ("6.0 cm")
        drawDoubleArrowLine(ctx, x_surface_A, y_dim_top, x_surface_B, y_dim_top);
        ctx.textAlign = 'center';
        ctx.fillText('6.0 cm', (x_surface_A + x_surface_B) / 2, y_dim_top - 10);

        // Bottom dimension ("x")
        drawDoubleArrowLine(ctx, x_surface_A, y_dim_bottom, xP, y_dim_bottom);
        ctx.textAlign = 'center';
        ctx.fillText('x', (x_surface_A + xP) / 2, y_dim_bottom - 10);

        // --- Draw Figure Label ---
        ctx.font = 'bold 22px Arial';
        ctx.fillText('Fig. 6.1', canvas.width / 2, canvas.height - 20);
    </script>
</body>
</html>